<template>
	<div class="toplist">
		<div class="one-line">
			<div class="left">
				<img src="../../assets/top/top1@2x.png" alt="" class="tag">
				<img :src="top1.defaultAlbum" alt="" class="goods-img">
				
			</div>
			<div class="right">
				
					<div class="info">
						<div class="name">
							{{ top1.pName }}
						</div>
						<div class="price">
							￥{{ top1.fSalePrice }}
						</div>
					</div>
					<p class="tags" v-for="(item,index) in top1.lsUpTags" :key="index">{{item.tag_name}}</p>
					<p class="desc">{{top1.cSellingPoint}}</p>
					<div class="group">
						<span @click="goDetail(top1)">加入购物车</span>
						<span @click="goDetail(top1)">立即购买</span>
					</div>
				
				
			</div>
		</div>
		<div class="goods-list">
			<div v-for="(item, index) in list" :key="item.id" class="goods-item" v-if="index > 0" @click="goDetail(item)">
				<div>
					<div class="goods-img">
						<img :src="item.defaultAlbum" alt="">
					</div>
					<div class="goods-info">
						<div class="name">
							{{ item.pName }}
						</div>
						<div class="price">
							￥{{ item.fSalePrice }}
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- <div class="more">
			点击加载更多
		</div> -->
	</div>
</template>

<script>
	export default {
		name: "",
		components: {},
		data() {
			return {
				list: [],
				top1: {},
			};
		},
		mounted() {
			// this.getData()
		},
		methods: {
			getData(id){
				let data = {
					shop_id:id
				}
				this.$api.home.sales(data).then((res) => {
					if (res.code == 1) {
						this.list = res.data;
						if (res.data.length > 0) {
							this.top1 = res.data[0];
						}
					}
				});
			},
			//跳转商品详情
			goDetail(item) {
				this.$router.push({
					path: "/fruit/detail",
					query: {
						id: item.pid,
						iShopId:item.shop_id
					},
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.toplist {
		padding: 0 16.19rem;
		margin-top: 2.19rem;
		display: flex;
		flex-direction: column;

		.one-line {
			margin-top: -8.25rem;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 37.63rem;
			z-index: 100;

			.left {
				background: #fff;
				display: flex;
				flex-direction: column;
				width: 50%;
				position: relative;
				height: 100%;

				.tag {
					width: 7rem;
					height: 7rem;
					border-radius: 50%;
					position: absolute;
					top: 2.38rem;
					right: 3.25rem;
					object-fit: contain;
				}

				.goods-img {
					width: 100%;
					height: 100%;
				}

				.goods {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 2rem 0 5rem;

					.info {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						width: 60%;

						.name {
							font-size: 1.5rem;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: rgba(51, 51, 51, 1);
							line-height: 1.2;
						}

						.price {
							font-size: 1.5rem;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: rgba(255, 139, 139, 1);
							margin-top: 1.5rem;
						}
					}

					.group {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						flex: 1;

						span {
							display: inline-flex;
							justify-content: center;
							align-items: center;
							width: 6.56rem;
							height: 2.44rem;
							background: rgba(23, 23, 23, 1);
							font-size: 0.82rem;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: rgba(255, 255, 255, 1);
							margin-left: 3rem;
							cursor: pointer;
						}
					}
				}
			}

			.right {
				width: 50%;
				background-color: #f3f3f3;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 100%;
				
				.tags {
					padding: 1rem 1.38rem;
					font-size: 1.13rem;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					background-color: #32b2a1;
					margin-top: 4.63rem;
					margin-bottom: 2.06rem;
				}

				.desc {
					font-size: 1.13rem;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					padding: 0 2rem;
					line-height: 1.2;
				}
				
					
				
					.info {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-top: 10rem;
				
						.name {
							font-size: 1.5rem;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: rgba(51, 51, 51, 1);
							line-height: 1.2;
						}
				
						.price {
							font-size: 1.5rem;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: rgba(255, 139, 139, 1);
							margin-top: 1.5rem;
						}
					}
				
					.group {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						flex: 1;
				
						span {
							display: inline-flex;
							justify-content: center;
							align-items: center;
							width: 6.56rem;
							height: 2.44rem;
							background: rgba(23, 23, 23, 1);
							font-size: 0.82rem;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: rgba(255, 255, 255, 1);
							margin-left: 3rem;
							cursor: pointer;
						}
					}
				
			}
		}

		.goods-list {
			margin-top: 1.88rem;
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;

			.goods-item {
				width: 24%;
				height: 25.88rem;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 1%;
				margin-bottom: 2.38rem;
				cursor: pointer;
				background: #fff;

				&:nth-child(4n) {
					margin-right: 0;
				}
				&>div{
					width: 100%;
				}
				.goods-img {
					width: 100%;
					height: 20rem;
					display: flex;
					align-items: center;
					justify-content: center;

					img {
						width: 16rem;
						height: 16rem;
						object-fit: contain;
					}
				}

				.goods-info {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					// margin: 0 1.5rem;
					width: 100%;
					.name {
						padding: 0 1.5rem;
						font-size: 1.13rem;
						line-height: 1.5rem;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(0, 0, 0, 1);
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.price {
						padding: 0 1.5rem;
						font-size: 1.5rem;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(243, 64, 111, 1);
						margin-top: 0.75rem;
					}
				}
			}
		}

		.more {
			font-size: 1rem;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			line-height: 1.95rem;
			text-align: center;
			margin: 3.13rem auto;
			cursor: pointer;
		}
	}
</style>
